<template>
	<gesture-back>
		<view class="container">
			<!-- 评分展示卡片 -->
			<view class="score-card">
				<view class="score-row">
					<view class="id-box">
						<text class="id-label">ID</text>
						<text class="id-value">{{ crewDetail.id }}</text>
					</view>
					<view class="score-box">
						<text class="score-value">{{ crewDetail.score }}</text>
						<text class="score-unit">分</text>
					</view>
				</view>
				<view class="divider"></view>
				<view class="info-row">
					<view class="type-info">
						<text class="label">理想型:</text>
						<text class="value">{{ crewDetail.ideaType }}</text>
					</view>
					<view class="eval-count">
						<text>{{ crewDetail.evalCount }}人评价</text>
					</view>
				</view>
			</view>
			
			<!-- 星级评分 -->
			<view class="rate-card">
				<view class="rate-content">
					<!-- 星级评分容器 - 与维度评分组件对齐 -->
					<view class="star-rating-container">
						<view class="star-rating-title">星级评分</view>
						
						<view class="stars">
							<view 
								class="star" 
								v-for="i in 5" 
								:key="i"
								@tap="setRating(i)"
							>
								<uni-icons 
									:type="i <= userRating/2 ? 'star-filled' : 'star'" 
									size="28" 
									:color="i <= userRating/2 ? '#ffca3a' : '#ccc'"
								></uni-icons>
							</view>
						</view>
						<view class="rate-display">
							<text class="rate-value">{{ userRating }}</text>
							<text class="rate-unit">分</text>
						</view>
					</view>
					
					<!-- 维度评分容器 -->
					<view class="dimension-rating-container">
						<view class="dimension-title">维度评分</view>
						
						<!-- 耐心尊重度滑动条 -->
						<view class="slider-container">
							<view class="slider-header">
								<text class="slider-title">耐心尊重度</text>
								<text class="slider-value">{{ patienceRespect }}</text>
							</view>
							<view class="slider-wrapper">
								<view class="slider-labels">
									<text>-2</text>
									<text>-1</text>
									<text>0</text>
									<text>1</text>
									<text>2</text>
								</view>
								<view class="custom-slider">
									<slider 
										:value="patienceRespect + 2" 
										:min="0" 
										:max="4" 
										:step="1" 
										:block-size="24"
										:show-value="false"
										activeColor="#6c5ce7"
										backgroundColor="#f0f0f0"
										@change="onPatienceChange"
									/>
								</view>
								<view class="slider-desc">
									<text class="desc-text">{{ getPatienceDesc() }}</text>
								</view>
							</view>
						</view>
						
						<!-- 额外要求度滑动条 -->
						<view class="slider-container">
							<view class="slider-header">
								<text class="slider-title">额外要求度</text>
								<text class="slider-value">{{ additionalDemands }}</text>
							</view>
							<view class="slider-wrapper">
								<view class="slider-labels">
									<text>-2</text>
									<text>-1</text>
									<text>0</text>
									<text>1</text>
									<text>2</text>
								</view>
								<view class="custom-slider">
									<slider 
										:value="additionalDemands + 2" 
										:min="0" 
										:max="4" 
										:step="1" 
										:block-size="24"
										:show-value="false"
										activeColor="#6c5ce7"
										backgroundColor="#f0f0f0"
										@change="onDemandsChange"
									/>
								</view>
								<view class="slider-desc">
									<text class="desc-text">{{ getDemandsDesc() }}</text>
								</view>
							</view>
						</view>
						
						<!-- 提交按钮 -->
						<view class="submit-button" @tap="submitDimensionRating">
							<text class="submit-text">提交维度评分</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- Tab切换 -->
			<view class="tab-card">
				<view class="tab-header">
					<view 
						class="tab-item" 
						:class="{active: detailTab === 0}" 
						@tap="switchDetailTab(0)"
					>坐标图</view>
					<view 
						class="tab-item" 
						:class="{active: detailTab === 1}" 
						@tap="switchDetailTab(1)"
					>提问范围</view>
				</view>
				
				<!-- 坐标图内容 -->
				<view class="tab-content" v-show="detailTab === 0">
					<canvas canvas-id="detailPlot" class="detail-canvas"></canvas>
					
					<view class="legend">
						<view class="legend-item">
							<view class="color-dot current"></view>
							<text>当前乘务长</text>
						</view>
						<view class="legend-item">
							<view class="color-dot others"></view>
							<text>全部乘务长</text>
						</view>
					</view>
				</view>
				
				<!-- 提问范围内容 - 只保留评论组件 -->
				<view class="tab-content" v-show="detailTab === 1">
					<comments ref="commentsComponent" :hide-input-bar="true" />
				</view>
			</view>
			
			<!-- 底部评论框 - 只在提问范围标签下显示 -->
			<view class="comment-box" v-show="detailTab === 1">
				<input type="text" placeholder="写下你的评价..." v-model="commentText" class="comment-input" />
				<view class="comment-btn" @tap="submitComment">提交</view>
			</view>
		</view>
	</gesture-back>
</template>

<script>
import Comments from '@/components/common-comments/index.vue';
import GestureBack from '@/components/gesture-back/index.vue';

export default {
	components: {
		Comments,
		GestureBack
	},
	data() {
		return {
			id: 0,
			crewDetail: {
				id: 216999,
				score: 9.1,
				ideaType: '高耐心得度，低愤怒外要求度',
				evalCount: 100,
				totalScore: 910,
				// 当前乘务长的坐标位置（新格式）
				coordinate: {
					x: 125.3,
					y: -87.9,
					originalScore: 1,
					label: "当前乘务长"
				}
			},
			userRating: 0,
			hasRated: false, 
			detailTab: 0,
			commentText: '', 
			// 所有人员的坐标数据 - 静态数据
			allCoordinates: [
				{
					"x": 176.3,
					"y": -189.2,
					"originalScore": -2,
					"label": "用户A"
				},
				{
					"x": -192.7,
					"y": -167.5,
					"originalScore": -2,
					"label": "用户B"
				},
				{
					"x": -112.4,
					"y": -85.1,
					"originalScore": -1,
					"label": "用户C"
				},
				{
					"x": -78.9,
					"y": -132.8,
					"originalScore": -1,
					"label": "用户D"
				},
				{
					"x": -23.5,
					"y": 18.2,
					"originalScore": 0,
					"label": "用户E"
				},
				{
					"x": 31.7,
					"y": -45.9,
					"originalScore": 0,
					"label": "用户F"
				},
				{
					"x": 85.2,
					"y": 112.4,
					"originalScore": 1,
					"label": "用户G"
				},
				{
					"x": 124.8,
					"y": 76.3,
					"originalScore": 1,
					"label": "用户H"
				},
				{
					"x": 178.5,
					"y": 215.7,
					"originalScore": 2,
					"label": "用户I"
				},
				{
					"x": 221.3,
					"y": 189.4,
					"originalScore": 2,
					"label": "用户J"
				}
			],
			// 当前用户的坐标数据 - 静态数据（指向allCoordinates中的用户A）
			currentUserCoordinate: {
				"x": 176.3,
				"y": -189.2,
				"originalScore": -2,
				"label": "用户A",
				"id": 216999
			},
			currentCrewPosition: {
				x: 125.3,
				y: -87.9,
				originalScore: 1,
				label: "当前乘务长"
			},
			patienceRespect: 0,
			additionalDemands: 0
		}
	},
	onLoad(options) {
		if (options.id) {
			this.id = options.id;
			console.log('获取ID为', options.id, '的乘务长详情 - 使用静态数据');
		} else {
			console.log('使用默认静态数据');
		}
		// 静态数据已在data中设置，无需异步加载
	},
	onReady() {
		// 页面ready后直接绘制坐标图，因为使用的是静态数据
		console.log('页面ready，直接绘制坐标图...');
		this.$nextTick(() => {
			if (this.detailTab === 0) {
				this.drawChart();
			}
		});
	},
	methods: {
		fetchCrewDetail(id) {
			console.log('获取ID为', id, '的乘务长详情');
			if(typeof id === 'string' && id.startsWith('other-')) {
				console.log('这是其他评分类型的详情');
				setTimeout(() => {
					this.crewDetail = {
						id: id,
						score: 8.9,
						ideaType: '服务态度优秀',
						evalCount: Math.floor(Math.random() * 50) + 50,
						totalScore: 0,
						// 当前乘务长的坐标位置
						coordinate: {
							x: 80.5,
							y: 50.3,
							originalScore: 1,
							label: "其他评分项"
						}
					};
					this.crewDetail.totalScore = Math.round(this.crewDetail.score * this.crewDetail.evalCount);
					this.currentCrewPosition = this.crewDetail.coordinate;
					this.fetchAllCoordinates();
				}, 200);
			} else {
				console.log('这是乘务长评分的详情');
				const crewId = parseInt(id);
				if (!isNaN(crewId)) {
					const mockData = {
						217001: {
							id: 217001,
							score: 8.7,
							ideaType: '高服务意识，良好沟通能力',
							evalCount: 87,
							// 当前乘务长的坐标位置
							coordinate: {
								x: 120.5,
								y: -50.3,
								originalScore: 1,
								label: "217001号乘务长"
							}
						},
						217005: {
							id: 217005,
							score: 9.5,
							ideaType: '专业技能优秀，应急反应迅速',
							evalCount: 120,
							// 当前乘务长的坐标位置
							coordinate: {
								x: 180.8,
								y: 30.2,
								originalScore: 2,
								label: "217005号乘务长"
							}
						},
						217008: {
							id: 217008,
							score: 8.2,
							ideaType: '团队协作能力强，执行力高',
							evalCount: 95,
							// 当前乘务长的坐标位置
							coordinate: {
								x: 50.7,
								y: 120.4,
								originalScore: 0,
								label: "217008号乘务长"
							}
						}
					};
					if (mockData[crewId]) {
						this.crewDetail = mockData[crewId];
						this.crewDetail.totalScore = Math.round(this.crewDetail.score * this.crewDetail.evalCount);
						this.currentCrewPosition = this.crewDetail.coordinate;
						this.fetchAllCoordinates();
					}
				}
			}
		},
		setRating(rating) {
			if (this.hasRated) {
				this.crewDetail.totalScore = this.crewDetail.totalScore - this.userRating;
				this.crewDetail.evalCount--;
			}
			this.userRating = rating * 2;
			
			this.crewDetail.evalCount++;
			this.crewDetail.totalScore += this.userRating;
			
			this.crewDetail.score = (this.crewDetail.totalScore / this.crewDetail.evalCount).toFixed(1);
			this.crewDetail.score = parseFloat(this.crewDetail.score);
			
			console.log('评分后的数据:', {
				评分: this.userRating,
				耐心尊重度: this.patienceRespect,
				额外要求度: this.additionalDemands,
				总分: this.crewDetail.totalScore,
				人数: this.crewDetail.evalCount,
				平均分: this.crewDetail.score
			});
			
			// 更新理想型文本
			this.updateIdealType();
			
			this.hasRated = true;
			uni.showToast({
				title: '评分成功',
				icon: 'success'
			});
			
			// TODO: 这里应该调用API提交评分数据到后端
			// this.submitRatingToBackend();
		},
		switchDetailTab(index) {
			this.detailTab = index;
			if (index === 0) {
				this.$nextTick(() => {
					// 直接绘制，因为使用的是静态数据
					console.log('切换到坐标图，直接绘制...');
					this.drawChart();
				});
			}
		},
		submitComment() {
			if (!this.commentText.trim()) {
				uni.showToast({
					title: '评论内容不能为空',
					icon: 'none'
				});
				return;
			}
			
			if (this.userRating === 0) {
				uni.showToast({
					title: '请先进行评分',
					icon: 'none'
				});
				return;
			}
			
			// 将评分维度整合到评论中
			const ratingInfo = `[总评: ${this.userRating}分 | 耐心尊重: ${this.patienceRespect} | 额外要求: ${this.additionalDemands}]`;
			const content = `${ratingInfo}\n${this.commentText}`;
			
			const newComment = {
				id: Date.now(),
				username: '我',
				avatar: '/static/logo.png',
				content: content,
				time_str: new Date().toISOString().split('T')[0],
				location: '',
				likes: 0,
				isLiked: false,
				replies: []
			};
			
			try {
				if (this.$refs.commentsComponent) {
					this.$refs.commentsComponent.addComment(newComment);
					console.log('评论已添加到组件');
				} else {
					console.error('评论组件未找到');
				}
			} catch (error) {
				console.error('添加评论失败:', error);
			}
			
			uni.showToast({
				title: '评价成功',
				icon: 'success'
			});
			
			this.commentText = '';
		},
		drawChart() {
			console.log('开始绘制坐标图...');
			console.log('当前数据状态:', {
				所有坐标数量: this.allCoordinates.length,
				当前用户坐标: this.currentUserCoordinate,
				详情标签页: this.detailTab
			});
			
			const ctx = uni.createCanvasContext('detailPlot', this);
			const canvasW = 400;
			const canvasH = 400;
			const padding = 25; // 适当增加边距以适应更大的画布
			const chartW = canvasW - padding * 2;
			const chartH = canvasH - padding * 2;
			
			// 坐标系配置
			const minCoord = -250; // 显示范围最小值
			const maxCoord = 250;  // 显示范围最大值
			const coordRange = maxCoord - minCoord; // 坐标范围：500
			
			// 清除画布
			ctx.clearRect(0, 0, canvasW, canvasH);
			
			// 绘制背景
			ctx.beginPath();
			ctx.setFillStyle('#fafafa');
			ctx.fillRect(0, 0, canvasW, canvasH);
			
			// 绘制网格线
			ctx.beginPath();
			ctx.setStrokeStyle('#f0f0f0');
			ctx.setLineWidth(1);
			
			// 垂直网格线 (每100单位一条)
			for (let coord = minCoord; coord <= maxCoord; coord += 100) {
				const x = padding + (coord - minCoord) / coordRange * chartW;
				ctx.moveTo(x, padding);
				ctx.lineTo(x, padding + chartH);
			}
			
			// 水平网格线 (每100单位一条)
			for (let coord = minCoord; coord <= maxCoord; coord += 100) {
				const y = padding + (maxCoord - coord) / coordRange * chartH; // Y轴翻转
				ctx.moveTo(padding, y);
				ctx.lineTo(padding + chartW, y);
			}
			ctx.stroke();
			
			// 绘制坐标轴
			ctx.beginPath();
			ctx.setStrokeStyle('#333');
			ctx.setLineWidth(2);
			
			// X轴 (y=0的位置)
			const centerY = padding + (maxCoord - 0) / coordRange * chartH;
			ctx.moveTo(padding, centerY);
			ctx.lineTo(padding + chartW, centerY);
			
			// Y轴 (x=0的位置) 
			const centerX = padding + (0 - minCoord) / coordRange * chartW;
			ctx.moveTo(centerX, padding);
			ctx.lineTo(centerX, padding + chartH);
			ctx.stroke();
			
			// 绘制坐标轴箭头
			const arrowSize = 8; // 箭头大小
			
			// X轴正方向箭头（右端）
			ctx.beginPath();
			ctx.setFillStyle('#333');
			ctx.moveTo(padding + chartW, centerY); // 箭头顶点
			ctx.lineTo(padding + chartW - arrowSize, centerY - arrowSize/2); // 左上角
			ctx.lineTo(padding + chartW - arrowSize, centerY + arrowSize/2); // 左下角
			ctx.closePath();
			ctx.fill();
			
			// Y轴正方向箭头（上端）
			ctx.beginPath();
			ctx.setFillStyle('#333');
			ctx.moveTo(centerX, padding); // 箭头顶点
			ctx.lineTo(centerX - arrowSize/2, padding + arrowSize); // 左下角
			ctx.lineTo(centerX + arrowSize/2, padding + arrowSize); // 右下角
			ctx.closePath();
			ctx.fill();
			
			// 绘制坐标轴标注
			ctx.setFontSize(12);
			ctx.setFillStyle('#666');
			
			// 设置字体加粗
			ctx.font = 'bold 12px sans-serif';
			
			// X轴标注
			// X轴正方向（右端）
			ctx.fillText('耐心', padding + chartW - 30, centerY + 20);
			// X轴反方向（左端）
			ctx.fillText('不耐烦', padding, centerY + 20);
			
			// Y轴标注
			// Y轴正方向（上端）
			ctx.fillText('负担小', centerX - 45, padding + 15);
			// Y轴反方向（下端）- 调整位置避免超出Canvas边界和与Y轴重合
			ctx.fillText('事多', centerX - 35, padding + chartH - 10);
			
			// 绘制所有人员的坐标点
			console.log('准备绘制', this.allCoordinates.length, '个坐标点');
			this.allCoordinates.forEach((person, index) => {
				console.log(`绘制第${index + 1}个点:`, person);
				
				// 如果是当前用户，跳过，稍后单独绘制高亮点
				if (this.currentUserCoordinate && 
					person.x === this.currentUserCoordinate.x && 
					person.y === this.currentUserCoordinate.y) {
					console.log('跳过当前用户点，稍后绘制高亮版本');
					return;
				}
				
				// 将数据坐标转换为画布坐标
				const canvasX = padding + (person.x - minCoord) / coordRange * chartW;
				const canvasY = padding + (maxCoord - person.y) / coordRange * chartH; // Y轴翻转
				
				// 其他人员：统一使用黑色
				ctx.beginPath();
				ctx.setFillStyle('#333'); // 统一黑色
				ctx.arc(canvasX, canvasY, 4, 0, Math.PI * 2);
				ctx.fill();
			});
			
			// 绘制当前用户的高亮坐标点（如果数据已加载）
			if (this.currentUserCoordinate) {
				const currentX = padding + (this.currentUserCoordinate.x - minCoord) / coordRange * chartW;
				const currentY = padding + (maxCoord - this.currentUserCoordinate.y) / coordRange * chartH; // Y轴翻转
				
				// 当前用户：绘制红色高亮标记
				ctx.beginPath();
				ctx.setFillStyle('#ff4444'); // 红色
				ctx.setStrokeStyle('#fff'); // 白色边框
				ctx.setLineWidth(2);
				
				// 绘制圆形外边框，稍微大一些
				ctx.arc(currentX, currentY, 8, 0, Math.PI * 2);
				ctx.fill();
				ctx.stroke();
				
				console.log('绘制当前用户红色高亮点位:', {
					坐标: `(${this.currentUserCoordinate.x}, ${this.currentUserCoordinate.y})`,
					画布位置: `(${Math.round(currentX)}, ${Math.round(currentY)})`,
					标签: this.currentUserCoordinate.label
				});
			}
			
			ctx.draw();
		},
		onPatienceChange(e) {
			const sliderValue = e.detail.value; // 滑动条原始值 (0-4)
			const mappedValue = sliderValue - 2; // 映射后的值 (-2到2)
			this.patienceRespect = mappedValue;
			
			console.log('耐心尊重度滑动条变更:', {
				原始值: sliderValue,
				映射值: mappedValue,
				当前位置: `${sliderValue}/4`,
				显示标签: ['-2', '-1', '0', '1', '2'][sliderValue]
			});
		},
		onDemandsChange(e) {
			const sliderValue = e.detail.value; // 滑动条原始值 (0-4)  
			const mappedValue = sliderValue - 2; // 映射后的值 (-2到2)
			this.additionalDemands = mappedValue;
			
			console.log('额外要求度滑动条变更:', {
				原始值: sliderValue,
				映射值: mappedValue,
				当前位置: `${sliderValue}/4`,
				显示标签: ['"-2"', '"-1"', '"0"', '"1"', '"2"'][sliderValue]
			});
		},
		getPatienceDesc() {
			// Implement the logic to return a description based on patienceRespect
			switch(this.patienceRespect) {
				case -2:
					return '沟通明显不耐烦，态度冷漠或苛刻';
				case -1:
					return '沟通中偶尔不耐烦，尊重态度略显不足';
				case 0:
					return '沟通态度中规中矩，符合常规预期';
				case 1:
					return '沟通耐心，尊重组员意见，愿意倾听';
				case 2:
					return '沟通始终耐心，高度尊重组员，主动倾听';
				default:
					return '请评价耐心尊重度';
			}
		},
		getDemandsDesc() {
			// Implement the logic to return a description based on additionalDemands
			switch(this.additionalDemands) {
				case -2:
					return '管理中有大量额外要求，显著增加负担';
				case -1:
					return '管理中常有额外要求，如繁琐或非必要要求';
				case 0:
					return '管理中有适度额外要求，与标准流程平衡';
				case 1:
					return '管理以标准流程为主，偶尔有少量额外要求';
				case 2:
					return '管理高度简洁，严格遵循标准流程，无额外规定';
				default:
					return '请评价额外要求度';
			}
		},
		// 根据耐心尊重度和额外要求度更新理想型描述
		updateIdealType() {
			// 根据两个维度的值来确定理想型描述
			let patienceDesc = '';
			let demandsDesc = '';
			
			// 耐心尊重度描述
			if (this.patienceRespect >= 1) {
				patienceDesc = '高耐心尊重度';
			} else if (this.patienceRespect <= -1) {
				patienceDesc = '低耐心尊重度';
			} else {
				patienceDesc = '中等耐心尊重度';
			}
			
			// 额外要求度描述
			if (this.additionalDemands >= 1) {
				demandsDesc = '低额外要求度';
			} else if (this.additionalDemands <= -1) {
				demandsDesc = '高额外要求度';
			} else {
				demandsDesc = '中等额外要求度';
			}
			
			// 更新理想型描述
			this.crewDetail.ideaType = `${patienceDesc}，${demandsDesc}`;
		},
		// 获取所有人员的坐标数据（第一步）
		fetchAllCoordinates() {
			console.log('第一步：开始获取所有人员坐标数据...');
			
			setTimeout(() => {
				// 模拟后端返回所有人员的坐标数据
				const allCoordinatesResponse = {
					"code": 200,
					"message": "成功",
					"data": [
						{
							"x": 176.3,
							"y": -189.2,
							"originalScore": -2,
							"label": "用户A"
						},
						{
							"x": -192.7,
							"y": -167.5,
							"originalScore": -2,
							"label": "用户B"
						},
						{
							"x": -112.4,
							"y": -85.1,
							"originalScore": -1,
							"label": "用户C"
						},
						{
							"x": -78.9,
							"y": -132.8,
							"originalScore": -1,
							"label": "用户D"
						},
						{
							"x": -23.5,
							"y": 18.2,
							"originalScore": 0,
							"label": "用户E"
						},
						{
							"x": 31.7,
							"y": -45.9,
							"originalScore": 0,
							"label": "用户F"
						},
						{
							"x": 85.2,
							"y": 112.4,
							"originalScore": 1,
							"label": "用户G"
						},
						{
							"x": 124.8,
							"y": 76.3,
							"originalScore": 1,
							"label": "用户H"
						},
						{
							"x": 178.5,
							"y": 215.7,
							"originalScore": 2,
							"label": "用户I"
						},
						{
							"x": 221.3,
							"y": 189.4,
							"originalScore": 2,
							"label": "用户J"
						}
					]
				};
				
				if (allCoordinatesResponse.code === 200) {
					this.allCoordinates = allCoordinatesResponse.data;
					console.log('第一步完成：获取所有人员坐标数据成功，共', this.allCoordinates.length, '个数据点');
					
					// 第一步完成后绘制基础图表
					this.$nextTick(() => {
						if (this.detailTab === 0) {
							this.drawChart();
							// 延迟1秒后获取当前用户坐标
							setTimeout(() => {
								this.fetchCurrentUserCoordinate();
							}, 1000);
						}
					});
				} else {
					console.error('获取所有坐标数据失败:', allCoordinatesResponse.message);
					uni.showToast({
						title: '获取坐标数据失败',
						icon: 'none'
					});
				}
			}, 300);
		},
		
		// 获取当前用户的坐标数据（第二步）
		fetchCurrentUserCoordinate() {
			console.log('第二步：开始获取当前用户坐标数据...');
			
			setTimeout(() => {
				// 模拟后端返回当前用户的坐标数据
				const currentUserResponse = {
					"code": 200,
					"message": "成功",
					"data": [
						{
							"x": this.currentCrewPosition.x,
							"y": this.currentCrewPosition.y,
							"originalScore": this.currentCrewPosition.originalScore,
							"label": this.currentCrewPosition.label,
							"id": this.crewDetail.id
						}
					]
				};
				
				if (currentUserResponse.code === 200) {
					this.currentUserCoordinate = currentUserResponse.data[0];
					console.log('第二步完成：获取当前用户坐标数据成功:', this.currentUserCoordinate);
					
					// 第二步完成后重新绘制图表，高亮当前用户
					this.$nextTick(() => {
						if (this.detailTab === 0) {
							this.drawChart();
						}
					});
				} else {
					console.error('获取当前用户坐标数据失败:', currentUserResponse.message);
					uni.showToast({
						title: '获取当前用户坐标失败',
						icon: 'none'
					});
				}
			}, 300);
		},
		// 提交评分数据到后端
		async submitRatingToBackend() {
			try {
				// TODO: 替换为真实的API调用
				const ratingData = {
					crewId: this.crewDetail.id,
					rating: this.userRating,
					patienceScore: this.patienceRespect,
					demandsScore: this.additionalDemands,
					comment: this.commentText,
					timestamp: new Date().getTime()
				};
				
				console.log('准备提交评分数据:', ratingData);
				
				// 模拟API调用
				// const response = await this.$http.post('/api/crew/rating', ratingData);
				
				// 模拟API响应
				const mockResponse = {
					code: 200,
					message: "评分提交成功",
					data: {
						id: Date.now(),
						status: "success"
					}
				};
				
				if (mockResponse.code === 200) {
					console.log('评分提交成功:', mockResponse.message);
				} else {
					throw new Error(mockResponse.message);
				}
				
			} catch (error) {
				console.error('评分提交失败:', error);
				uni.showToast({
					title: '评分提交失败',
					icon: 'none'
				});
			}
		},
		submitDimensionRating() {
			// 验证评分数据
			if (this.patienceRespect === 0 && this.additionalDemands === 0) {
				uni.showToast({
					title: '请进行维度评分',
					icon: 'none'
				});
				return;
			}
			
			// 调用后端提交方法
			this.submitDimensionRatingToBackend();
		},
		
		// 提交维度评分数据到后端
		async submitDimensionRatingToBackend() {
			try {
				// TODO: 替换为真实的API调用
				const dimensionData = {
					crewId: this.crewDetail.id,
					patienceRespectScore: this.patienceRespect,  // 耐心尊重度评分
					additionalDemandsScore: this.additionalDemands,  // 额外要求度评分
					timestamp: new Date().getTime(),
					evaluatorId: 'current_user_id' // 评价者ID
				};
				
				console.log('准备提交维度评分数据:', dimensionData);
				
				// 模拟API调用
				// const response = await this.$http.post('/api/crew/dimension-rating', dimensionData);
				
				// 模拟API响应
				const mockResponse = {
					code: 200,
					message: "维度评分提交成功",
					data: {
						id: Date.now(),
						status: "success",
						coordinate: {
							x: this.patienceRespect * 100 + Math.random() * 30 - 15,
							y: this.additionalDemands * 100 + Math.random() * 30 - 15
						}
					}
				};
				
				if (mockResponse.code === 200) {
					console.log('维度评分提交成功:', mockResponse.message);
					uni.showToast({
						title: '维度评分提交成功',
						icon: 'success'
					});
					
					// 更新理想型描述
					this.updateIdealType();
					
					// 如果响应包含坐标信息，可以更新当前乘务长的坐标
					if (mockResponse.data.coordinate) {
						this.currentCrewPosition.x = mockResponse.data.coordinate.x;
						this.currentCrewPosition.y = mockResponse.data.coordinate.y;
					}
					
				} else {
					throw new Error(mockResponse.message);
				}
				
			} catch (error) {
				console.error('维度评分提交失败:', error);
				uni.showToast({
					title: '维度评分提交失败',
					icon: 'none'
				});
			}
		},
	}
}
</script>

<style lang="scss">
	page {
		background-color: #f6f7fb;
	}
.container {
	
	padding-bottom: 120rpx;
}

.score-card, .rate-card, .tab-card {
	margin: 20rpx;
	border-radius: 8rpx;
	background-color: #fff;
	box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
	overflow: hidden;
}

.score-card {
	padding:  30rpx;
}

.score-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.id-box {
	.id-label {
		font-size: 24rpx;
		color: #999;
		margin-right: 10rpx;
	}
	
	.id-value {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
	}
}

.score-box {
	display: flex;
	align-items: baseline;
	
	.score-value {
		font-size: 64rpx;
		font-weight: 600;
		color: #6c5ce7;
		line-height: 1;
	}
	
	.score-unit {
		font-size: 24rpx;
		color: #6c5ce7;
		margin-left: 5rpx;
	}
}

.divider {
	height: 1rpx;
	background-color: #f0f0f0;
	margin: 20rpx 0;
}

.info-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.type-info {
	font-size: 26rpx;
	color: #333;
	
	.label {
		color: #999;
		margin-right: 10rpx;
	}
}

.eval-count {
	font-size: 24rpx;
	color: #999;
	padding: 6rpx 15rpx;
	background-color: #f5f5f5;
	border-radius: 15rpx;
}

/* 星级评分 */
.rate-content {
	padding: 20rpx;
	display: flex;
	align-items: center;
	flex-direction: column;
}

.star-rating-container {
	margin-bottom: 10rpx;
	width: 100%;
	background-color: #f9f9fc;
	border-radius: 12rpx;
	padding: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.star-rating-title {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
	margin-bottom: 20rpx;
}

.stars {
	display: flex;
	justify-content: center;
	margin-bottom: 20rpx;
}

.star {
	margin: 0 8rpx;
}

.rate-display {
	display: flex;
	align-items: baseline;
	justify-content: center;
}

.rate-value {
	font-size: 28rpx;
	color: #6c5ce7;
	font-weight: 600;
	margin-right: 5rpx;
}

.rate-unit {
	font-size: 24rpx;
	color: #6c5ce7;
}

/* Tab切换 */
.tab-header {
	display: flex;
	border-bottom: 1rpx solid #f0f0f0;
}

.tab-item {
	flex: 1;
	text-align: center;
	padding: 20rpx 0;
	font-size: 28rpx;
	color: #666;
	position: relative;
	
	&.active {
		color: #6c5ce7;
		font-weight: 500;
		
		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 25%;
			width: 50%;
			height: 4rpx;
			background-color: #6c5ce7;
			border-radius: 2rpx;
		}
	}
}

.tab-content {
	padding: 10rpx;
}

.detail-canvas {
	width: 100%;
	height: 750rpx; /* 确保Canvas完整显示，保持正方形比例 */
	background-color: #fafafa;
	border-radius: 8rpx;
}

.legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 20rpx;
	gap: 15rpx;
}

.legend-item {
	display: flex;
	align-items: center;
	margin: 5rpx 10rpx;
	font-size: 24rpx;
	color: #666;
}

.color-dot {
	width: 20rpx;
	height: 20rpx;
	border-radius: 50%;
	margin-right: 10rpx;
	
	&.current {
		background-color: #ff4444;
	}
	
	&.others {
		background-color: #333;
	}
}

/* 底部评论框 */
.comment-box {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	display: flex;
	padding: 20rpx;
	border-top: 1rpx solid #f0f0f0;
}

.comment-input {
	flex: 1;
	height: 80rpx;
	padding: 0 20rpx;
	background-color: #f5f5f5;
	border-radius: 8rpx;
	font-size: 28rpx;
}

.comment-btn {
	width: 140rpx;
	height: 80rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #6c5ce7;
	color: #fff;
	border-radius: 8rpx;
	margin-left: 20rpx;
	font-size: 28rpx;
}

.slider-container {
	margin-top: 30rpx;
	width: 100%;
	background-color: #f9f9fc;
	border-radius: 12rpx;
	padding: 20rpx;
}

.slider-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10rpx;
}

.slider-title {
	font-size: 26rpx;
	color: #333;
	font-weight: 500;
}

.slider-value {
	font-size: 28rpx;
	color: #6c5ce7;
	font-weight: 600;
}

.slider-wrapper {
	width: 100%;
}

.slider-labels {
	display: flex;
	width: 100%;
	margin-bottom: 5rpx;
	position: relative;
	height: 30rpx;
}

.slider-labels text {
	font-size: 22rpx;
	color: #999;
	position: absolute;
	text-align: center;
	width: 30rpx;
	transform: translateX(-50%);
}

/* 为每个标签位置设置精确对齐 - 对应滑动条的5个刻度位置 */
.slider-labels text:nth-child(1) { /* -2 */
	left: 0%;
}

.slider-labels text:nth-child(2) { /* -1 */
	left: 25%;
}

.slider-labels text:nth-child(3) { /* 0 */
	left: 50%;
}

.slider-labels text:nth-child(4) { /* 1 */
	left: 75%;
}

.slider-labels text:nth-child(5) { /* 2 */
	left: 100%;
}

.slider-desc {
	margin-top: 10rpx;
	background-color: #fff;
	border-radius: 8rpx;
	padding: 10rpx 15rpx;
}

.desc-text {
	font-size: 24rpx;
	color: #666;
}

.custom-slider {
	position: relative;
	width: 100%;
	margin: 10rpx 0;
}

.dimension-rating-container {
	margin-top: 10rpx;
	width: 100%;
	background-color: #f9f9fc;
	border-radius: 12rpx;
	padding: 20rpx;
}

.dimension-title {
	font-size: 26rpx;
	color: #333;
	font-weight: 500;
	margin-bottom: 10rpx;
}

.submit-button {
	margin-top: 20rpx;
	width: 100%;
	height: 80rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #6c5ce7;
	color: #fff;
	border-radius: 8rpx;
	font-size: 28rpx;
}

.submit-text {
	font-size: 28rpx;
	color: #fff;
	font-weight: 500;
}
</style>
